<template>
  <div>
    <div class="news_content">
      <div class="news_header">
        <div class="header_title">{{ item.title }}</div>
        <div class="header_bt">
          <div class="bt_left">{{ item.creationTime }}</div>
          <div class="bt_right">{{ item.author }} 著</div>
        </div>
      </div>
      <div class="details_content" v-html="item.description">
        <!-- {{ item.desription }} -->
      </div>
    </div>
  </div>
</template>

<script>
import { FormatDate } from '@/lib';
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  created() {
    this.item.creationTime = FormatDate(this.item.creationTime, 'yyyy-MM-dd HH:mm:ss');
    this.item.description = this.formatRichText(this.item.description);
  },
  methods: {
    // 控制小程序中图片大小
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        console.log(match.search(/style=/gi));
        if (match.search(/style=/gi) === -1) {
          match = match.replace(/\<img/gi, '<img style=""');
        }
        return match;
      });
      newContent = newContent.replace(
        /style="/gi,
        '$& max-width:100% !important; '
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      return newContent;
    }
  }
};
</script>

<style lang="scss" scoped>
.news_content {
  width: 375px;
  height: 667px;
  overflow-y: auto;
  background: #fcfcfc;
  .news_header {
    padding: 30px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e0e0e0;
    .header_title {
      font-weight: 500;
      font-size: 20px;
      line-height: 22px;
      color: #353434;
    }
    .header_bt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      color: #828282;
      margin: 10px 0 0 0;
    }
  }
  .details_content {
    padding: 16px 20px 45px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 20px;
  }
  .next_news {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 95px;
    padding: 27px 40px 34px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #f2f3f4;
  }
}
</style>
